<template>
  <div>
    <el-card style="margin: 20px 0px">
      <!-- 引入封装的全局组件 -->
      <categorySelect :show="!isshowTable" @getCategoryId="getCategoryId"></categorySelect>
    </el-card>
    <el-card>
      <!--添加属性的按钮和表格区域 -->
      <div v-show="isshowTable">
        <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="AddAttributes">添加属性</el-button>
        <!-- 表格区域 -->
        <el-table :data="AttrList" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="80px" align="center">
          </el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="180">
          </el-table-column>
          <el-table-column label="属性值列表" width="width">
            <!-- 作用域插槽 -->
            <template slot-scope="{ row, $index }">
              <el-tag type="success" v-for="item in row.attrValueList" :key="item.id" style="margin: 0px 20px">
                {{ item.valueName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180px">
            <!-- 作用域插槽 -->
            <template slot-scope="{ row, $index }">
              <!-- 修改按钮 -->
              <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateAttr(row)"></el-button>
              <!-- 删除按钮 -->
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteAttr(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加属性的结构区域 -->
      <div v-show="!isshowTable">
        <el-form :inline="true" :model="AttrInfo">
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名" v-model="AttrInfo.attrName"></el-input>
          </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <el-button type="primary" icon="el-icon-plus" @click="addvalueName" :disabled="!AttrInfo.attrName">添加属性值
        </el-button>
        <el-button @click="isshowTable = true">取消</el-button>
        <!-- 表格区域 -->
        <el-table :data="AttrInfo.attrValueList" style="width: 100%; margin: 20px 0px" border>
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column label="属性值名称" width="width">
            <!-- 作用域插槽 -->
            <template slot-scope="{row,$index}">
              <!-- 编辑输入框与span查看的切换 -->
              <el-input ref="inputRef"  v-model="row.valueName" placeholder="请输入属性值名称" size="mini" v-if="row.flag" @blur="tolook(row)" @keyup.native.enter="row.flag=false"></el-input>
              <span v-else @click="toEdit(row,$index)" style="display:block">{{row.valueName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <!-- 作用域插槽 -->
            <template slot-scope="{row,$index}">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteValueName($index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 保存，取消按钮 -->
        <el-button type="primary" @click="saveAttr" :disabled="AttrInfo.attrValueList.length<1">保存</el-button>
        <el-button @click="isshowTable = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
  //按需引入lodash进行深拷贝
  import * as _ from 'lodash'
  export default {
    name: "",
    data() {
      return {
        //存放一级，二级，三级分类的id
        category1Id: "",
        category2Id: "",
        category3Id: "",
        //存放平台属性的表格数据
        AttrList: [],
        //控制表格和添加属性按钮的显示与隐藏
        isshowTable: true,
        //添加/修改属性的数据
        AttrInfo: {
          attrName: "", //属性名
          attrValueList: [ //属性值数组
          ],
          categoryId: 0,  
          categoryLevel: 3,  //分类的等级
        },
      };
    },
    methods: {
      //子组件的自定义属性
      getCategoryId({categoryId,level}){
        console.log(categoryId, level, "子组件传递过来的id和等级");
        if (level == 1) {
          this.category1Id = categoryId;
        } else if (level == 2) {
          this.category2Id = categoryId;
        } else {
          this.category3Id = categoryId;
          //此时三级分类的id已经存在,调用获取平台属性表格数据的方法
          this.getAttrList();
        }
      },
      //获取平台属性表格数据的方法
      async getAttrList() {
        //解构出一级，二级，三级分类的id
        let {
          category1Id,
          category2Id,
          category3Id
        } = this;
        //发起请求
        const result = await this.$API.attr.reqAttrList(
          category1Id,
          category2Id,
          category3Id
        );
        console.log(result, "表格数据");
        if (result.code == 200) {
          this.AttrList = result.data;
        }
      },
      //点击添加属性值按钮触发的事件
      addvalueName() {
        //向属性值attrValueList数组中添加一个属性值对象
        this.AttrInfo.attrValueList.push({
          attrId: this.AttrInfo.id,  //(新增的属性值的id就是对应的属性名的id)
          valueName: '',  //属性值的名称
          flag:true,  //添加属性值的时候捎带着添加一个开关默认为true,用来切换编辑框与查看
        })
      },
      //点击添加属性的按钮触发的事件
      AddAttributes() {
        //隐藏表格
        this.isshowTable = false;
        //点击重新添加属性之前清空Attrinfo
        this.AttrInfo = {
          attrName: "", //属性名
          attrValueList: [ //属性值数组

          ],
          categoryId: this.category3Id, //三级分类的id
          categoryLevel: 3, //三级分类的等级
        };

      },
      //点击编辑按钮触发的事件
      updateAttr(row) {
        this.isshowTable = false;
        console.log(row, "某一行的数据");
        //如果不进行深拷贝，会出现修改之后点击取消同样也会改变属性的值
        // this.AttrInfo=row;
        this.AttrInfo = _.cloneDeep(row);
        //在点击修改按钮的时候给每一个属性的属性值添加一个flag默认为false,主要为了查看与编辑的切换
        this.AttrInfo.attrValueList.forEach(item=>{
          // item.flag=false;  //这种给每一项的属性值赋一个flag属性的时候，视图不会发生变化，不是响应式数据
          this.$set(item,'flag',false);
        })

      },
      //编辑属性值的input输入框失去焦点触发的事件
      tolook(row){
        console.log(row,"失去焦点");
        row.valueName=row.valueName.trim();  //在input输入框失去焦点之后清楚用户输入的属性值名称两端的空格
        //新增的属性值不能与已经存在的属性值重复
        let isRepat=this.AttrInfo.attrValueList.some(item=>{
          if(row!==item){
            return row.valueName==item.valueName;
          }
          
        })
        console.log(isRepat,"222");
        if(isRepat) return;
        row.flag=false;
      },
      //当点击修改按钮的时候，点击查看属性值的span时触发的事件
      toEdit(row){
        console.log(row,"99999");
        row.flag=true
        //实现点击修改属性值的时候input输入框自动聚焦,
        // 数据变化视图跟着变化
        this.$nextTick(()=>{
          this.$refs.inputRef.focus();
        })
      },
      //点击删除按钮触发的事件
      // async deleteAttr(row){
      //   console.log(row,"删除行的数据");
      //    let result=await this.$confirm('此操作将永久删除该属性, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).catch(error=>{
      //     return error;
      //   })
      //   console.log(result);
      //   if(result!=="confirm"){
      //     this.$message.info('用户取消了删除');
      //   }
      //   //开始发起删除属性的请求操作



      // }

      //点击删除属性值的按钮触发的事件
      async deleteValueName(index){
        console.log(index,'要删除的属性值的索引');
         let result=await this.$confirm('此操作将永久删除该属性值, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error=>{
          return error;
        })
        console.log(result);
        if(result!=="confirm"){
          this.$message.info('用户取消了删除');
        }
        //这里删除属性值的操作不发起请求
        this.AttrInfo.attrValueList.splice(index,1)



      },
      //点击保存按钮触发的事件
      async saveAttr(){
        //整理参数
        //1.属性值不能为空 2.属性值数组中不能有flag字段
       this.AttrInfo.attrValueList=this.AttrInfo.attrValueList.filter(item=>{
          if(item.valueName!=''){
            delete item.flag;
            return true;
          }
        })
        //正式发起添加的请求
        let result=await this.$API.attr.reqAddOrUpdate(this.AttrInfo);
        console.log(result,"添加的请求");
        if(result.code==200){
          this.$message({type:'success',message:'添加成功'});
          //重新调用获取表格数据的方法
          this.getAttrList();
          //显示表格
          this.isshowTable=true;
          
        }else{
          this.$message({type:'error',message:'添加失败'})
        }


        // try {
        //   await this.$API.attr.reqAddOrUpdate(this.AttrInfo);
        //   this.$message({type:'success',message:'添加成功'});
        //   this.getAttrList();

        // }catch(error){
        //   this.$message('保存失败')

        // }
        
      }
    },
 
  };

</script>
<style lang="less" scoped>
</style>
